<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录/注册页面</title>
    <link rel="stylesheet" href="../css/login.css"> <!-- 引入登录页面样式表 -->
</head>

<body>
    <div class="login-container">
        <h2>欢迎来到学校论坛</h2>
        <div class="tab-buttons">
            <button class="tablink active" onclick="openTab(event, 'login')">登录</button>
            <button class="tablink" onclick="openTab(event, 'register')">注册</button>
        </div>

        <!-- 登录表单 -->
        <div id="login" class="tabcontent">
            <form id="loginForm" action="javascript:void(0);" method="post"> <!-- 使用javascript处理表单提交 -->
                <label for="username">用户名：</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名" required><br>
                <label for="password">密码：</label>
                <input type="password" id="password" name="password" placeholder="请输入密码" required><br>
                <input type="submit" value="登录">
            </form>
            <p id="login-error" style="color: red; display: none;">用户名或密码错误，请重新输入！</p>
        </div>

        <!-- 注册表单 -->
        <div id="register" class="tabcontent" style="display: none;">
            <form id="registerForm" action="javascript:void(0);" method="post"> <!-- 使用javascript处理表单提交 -->
                <label for="newUsername">用户名：</label>
                <input type="text" id="newUsername" name="newUsername" placeholder="请输入用户名" required><br>
                <label for="newPassword">密码：</label>
                <input type="password" id="newPassword" name="newPassword" placeholder="请输入密码" required><br>
                <label for="confirmPassword">确认密码：</label>
                <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码" required><br>
                <input type="email" id="email" name="email" placeholder="请输入邮箱（可选）"><br>
                <input type="submit" value="注册">
            </form>
            <p id="register-error" style="color: red; display: none;">注册失败，请稍后重试！</p>
        </div>

        <p><a href="#">忘记密码？</a> | <a href="../index.jsp">返回首页</a></p>
    </div>

    <script>
        // 切换登录与注册页面
        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablink");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        }

        // 登录表单提交
        document.getElementById('loginForm').addEventListener('submit', function (e) {
            e.preventDefault();
            var formData = new FormData(this);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:8080/luntan/LoginServlet', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        // 登录成功，跳转到首页
                        window.location.href = '../index.jsp';
                    } else {
                        // 登录失败，显示错误信息
                        document.getElementById('login-error').style.display = 'block';
                    }
                }
            };
            xhr.send(new URLSearchParams(formData).toString());
        });

        // 注册表单提交
        document.getElementById('registerForm').addEventListener('submit', function (e) {
            e.preventDefault();
            var formData = new FormData(this);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:8080/luntan/RegisterServlet', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 201) {
                        // 注册成功，提示用户去登录
                        alert('注册成功，请登录！');
                        document.querySelector('.tablink').click(); // 切换到登录 tab
                    } else {
                        // 注册失败，显示错误信息
                        document.getElementById('register-error').style.display = 'block';
                    }
                }
            };
            xhr.send(new URLSearchParams(formData).toString());
        });
    </script>
</body>

</html>
